<template>
  <div class="manager-panel">
    <!-- 巷道表格组件 -->
    <edge-table
      :table-data="tableData"
      :columns="columns"
      :zoom-to="zoomToLink"
      toolbar-id="edge-nanager-panel"
      @refresh="onRefresh"
    />
  </div>
</template>

<script>
import EdgeTable from '@/views/editor/components/edge-table'
import getLinkData from '@/mixins/get-link-data'
// 定义的字段信息
import columns from './columns'
// 测试数据
import TestData from './test-data'
import { mapActions } from 'vuex'

export default {
  components: { EdgeTable },
  mixins: [getLinkData],
  data() {
    return {
      tableData: [],
      columns: columns,
      fields: []
    }
  },
  created() {
    columns.forEach(column => {
      this.fields.push(column.field)
    })
  },
  mounted() {
    // 提取数据
    this.getLinkDatas(this.fields)
  },
  methods: {
    ...mapActions('editor/diagram', {
      callFunction: 'callFunction'
    }),
    // 回调函数(参见: mixins/get-link-data.js)
    onGetLinkDatas(datas) {
      this.tableData = datas
      console.log('提取到的数据:', this.tableData)
    },
    onRefresh() {
      this.getLinkDatas(this.fields)
    },
    zoomToLink(key) {
      // 调用函数，触发缩放定位操作
      this.callFunction({ sCmd: 'ZoomToLink', args: key })
    }
  }
}
</script>

<style lang="scss" scoped>
.manager-panel {
  height: 100%;
  overflow: hidden;
}
</style>
